<div class="containerStyle">
  <h3>描述</h3>
  <p>表格列拖动、列隐藏/显示</p>
  <h3>示例</h3>
  <ti-table [(displayedData)]="displayed" [srcData]="srcData" [columns]="columns" tiColsResizable>
    <div style="height: 28px; margin-bottom: 10px">
      <ti-cols-toggle style="float: right" [searchable]="searchable" [panelWidth]="panelWidth"></ti-cols-toggle>
    </div>
    <div class="ti3-resize-wrapper">
      <table>
        <thead>
          <tr>
            <th tiOverflow>{{columns[0].title}}</th>

            <!-- 如果要禁止拖动当前列，则给当前列表头的 th 标签上添加 not-resizable 属性 -->
            <th tiOverflow not-resizable *ngIf="columns[1].show">{{columns[1].title}}</th>

            <th tiOverflow *ngIf="columns[2].show" width="{{columns[2].width}}">{{columns[2].title}}</th>
            <th tiOverflow *ngIf="columns[3].show">{{columns[3].title}}</th>
            <th tiOverflow *ngIf="columns[4].show">{{columns[4].title}}</th>
          </tr>
        </thead>
        <tbody>
          <!--注意:ngFor中的displayed数据与displayedData传入的数据一致, 初始化设置为[]即可-->
          <tr *ngFor="let row of displayed">
            <td tiOverflow>{{row.firstName}}</td>
            <td tiOverflow *ngIf="columns[1].show">{{row.lastName}}</td>
            <td tiOverflow *ngIf="columns[2].show">{{row.age}}</td>
            <td tiOverflow *ngIf="columns[3].show">{{row.balance}}</td>
            <td tiOverflow *ngIf="columns[4].show">{{row.email}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </ti-table>
</div>
